<template>
  <dev class='111'>售后详情页</dev>
  <el-card class="box-card">
    <el-form :model="repairForm" style="width: 800px;height: 400px">
      <el-form-item label="姓名">
        <el-input v-model="repairForm.buyer" />
      </el-form-item>
      <el-form-item label="电话">
        <el-input v-model="repairForm.phoneNumber" />
      </el-form-item>

      <el-form-item label="故障机器">
        <div class="m-4">
          <el-cascader
              v-model="value"
              :options="options"
              :props="props"
              @change="handleChange"
          />
        </div></el-form-item>

      <el-form-item label="故障详情">
        <el-input v-model="repairForm.faultDetails" type="textarea" />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">提交</el-button>
        <el-button >取消</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script lang="ts" setup>

import { reactive } from 'vue'
import {ElMessage} from "element-plus";

// do not use same name with ref
const form = reactive({
  buyer: '',
  phoneNumber:'',
  address:'',
  desc:'',
})

const repairForm =  reactive({
  buyer:"",
  phoneNumber:"",
  deviceName:"",
  faultDetails:""
})

const onSubmit = () => {
  repairForm.deviceName = value.value[1]
  console.log(repairForm)

  axios.post("http://localhost:9091/repair/add",repairForm).then(res=>{
    console.log(res)
  })
    ElMessage({
        message: '报修成功',
        type: 'success',
        plain: true,
    })

  console.log('submit!')
}
import { ref } from 'vue'
import {ElMessage, FormInstance} from "element-plus";
import axios from "axios";

const value = ref([])

const props = {
  expandTrigger: 'hover' as const,
}



const handleChange = (value) => {
  console.log(value)
}
const options = [
  {
    value: 'yxl',
    label: '影像类',
    children: [
      {
        value: '彩色超声多普勒治疗仪',
        label: '彩色超声多普勒治疗仪',
      },
      {
        value: 'C臂型X光机',
        label: 'C臂型X光机',
      },
      {
        value: 'CT控制盒',
        label: 'CT控制盒',
      },
      {
        value: 'CT机',
        label: 'CT机',
      },
    ],
  },
  {
    value: 'kfl',
    label: '康复类',
    children: [
      {
        value: '下肢辅助行走设备',
        label: '下肢辅助行走设备',
      },
      {
        value: '牵引器',
        label: '牵引器',
      },
      {
        value: '代步轮椅',
        label: '代步轮椅',
      },
      {
        value: '外骨骼机器人',
        label: '外骨骼机器人',
      },
    ],
  },
  {
    value: 'sys',
    label: '实验室类',
    children: [
      {
        value: '纯水仪',
        label: '纯水仪',
      },
      {
        value: '稀释仪',
        label: '稀释仪',
      },
      {
        value: '血浆机',
        label: '血浆机',
      },
      {
        value: 'X荧光分析仪',
        label: 'X荧光分析仪',
      },
    ],
  },
  {
    value: 'jtl',
    label: '家庭类',
    children: [
      {
        value: '脑波设备',
        label: '脑波设备',
      },
      {
        value: '老人陪护机器人',
        label: '老人陪护机器人',
      },
      {
        value: '颈椎治疗仪',
        label: '颈椎治疗仪',
      },
      {
        value: '护眼仪',
        label: '护眼仪',
      },
    ],
  },
  {
    value: '检测类',
    label: '检测类',
    children: [
      {
        value: '血糖检测仪',
        label: '血糖检测仪',
      },
      {
        value: '心电监测仪',
        label: '心电监测仪',
      },
      {
        value: '点滴警报仪',
        label: '点滴警报仪',
      },
      {
        value: 'BMI测试仪',
        label: 'BMI测试仪',
      },
    ],
  },
  {
    value: 'zll',
    label: '治疗类',
    children: [
      {
        value: '制氧机',
        label: '制氧机',
      },
      {
        value: '雾化器',
        label: '雾化器',
      },
    ],
  },
]
</script>
